import "../base/index.css";
import * as THREE from "three";
import { City } from './city.js'
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";

export const initCity = () => {
  //获取canvas元素
  const canvas = document.getElementById("webgl");

  //创建场景
  const scene = new THREE.Scene();

  //创建相机
  const camera = new THREE.PerspectiveCamera(
    45,
    window.innerWidth / window.innerHeight,
    0.1,
    100000
  );
  camera.position.set(1000,500,100);
  scene.add(camera);
  // 添加相机控件
  const controls = new OrbitControls(camera, canvas);
  // 是否有惯性
  controls.enableDamping = true;
  // 是否可以缩放
  controls.enableZoom = true;
  // 最近和最远距离
  controls.minDistance = 100;
  controls.maxDistance = 2000; 
  // 开启右键拖动
  controls.enablePan = true;

  // // 定义了一个立方体的对象
  // const cubeGeometry = new THREE.BoxGeometry(2,2,2);

  // // 创建材质
  // const cubeMaterial = new THREE.MeshLambertMaterial({color: 0xff0000});

  // const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

  // // 添加到场景里
  // scene.add(cube);

  //添加灯光
  scene.add(new THREE.AmbientLight(0xadadad));
  const directionLight = new THREE.DirectionalLight(0xffffff, 1);
  directionLight.position.set(0,0,0);
  scene.add(directionLight);
  directionLight.castShadow = true;

  //创建渲染器
  const renderer = new THREE.WebGLRenderer({ canvas });
  renderer.setSize(window.innerWidth, window.innerHeight);
  //设置像素比
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
  // 设置场景颜色
  renderer.setClearColor(new THREE.Color(0x000000), 1);
  const city = new City(scene, camera, controls);
  // const animation = () => {
  //   cube.rotation.x += 0.01;
  //   cube.rotation.y += 0.01;
  //   // 渲染
  //   renderer.render(scene, camera);
  //   requestAnimationFrame(animation);
  // };
  // animation();
  const start = () => {

    city.start();

    controls.update();

    // 渲染场景
    renderer.render(scene, camera)

    requestAnimationFrame(start)
  }

  start();
  window.addEventListener("resize", () => {
    // 更新宽高比
    camera.aspect = window.innerWidth / window.innerHeight;
    // 更新相机的投影矩阵
    camera.updateProjectionMatrix();

    renderer.setSize(window.innerWidth, window.innerHeight);
    // 设置像素比
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
    renderer.render(scene, camera);
  });
};
